<script setup>
import {useTimetableStore} from "~/store/timetable.js";
import {storeToRefs} from "pinia";
import {useCurrentState} from "~/store/currentState.js";

const timetableStore = useTimetableStore()

const timetableList = storeToRefs(timetableStore).timetable

const currentState = useCurrentState()

const categories = ref([
  {
    icon: "heroicons:user-group",
    title: "Группы",
    name: "groups",
  },
  {
    icon: "heroicons:academic-cap",
    title: "Преподователи",
    name: "teachers",
  },
  {
    icon: "heroicons:command-line",
    title: "Кабинеты",
    name: "cabinets",
  },
])

const selectedCategory = ref("groups")
const selectedCourse = ref(0)

const selectCourse = (course) => {
  if (selectedCourse.value === course) {
    selectedCourse.value = 0
  }
  else selectedCourse.value = course
}

const selectedGroup = ref("")

</script>

<template>
  <nav class="dark:bg-slate-900 p-3 select-none">
    <a href="https://radiotech.su/" ><img src="@/public/logo.png" alt="logo" class="m-auto"></a>
    <div class="flex flex-col gap-5 p-5 dark:bg-slate-800 rounded-xl">
      <button v-for="category in categories" :key="category.name" class="flex gap-2" @click="selectedCategory = category.name">
        <Icon :icon="category.icon" class="dark:text-cyan-500" size="25"/>
        <span class="dark:text-cyan-500">{{category.title}}</span>
      </button>
    </div>
    <div class="m-2 flex flex-col gap-3" v-show="selectedCategory === 'groups'">
      <div v-for="course in timetableList" class="p-3 flex flex-col">
        <div class="flex justify-between cursor-pointer mb-3" @click="selectCourse(course.course)">
          <span class="text-3xl dark:text-white">{{course.course}} курс</span>
          <Icon icon="heroicons:chevron-down" class="dark:text-white transition-all" :class="{'rotate-180': selectedCourse === course.course}" size="40"/>
        </div>
        <transition name="group">
          <div v-show="selectedCourse === course.course" class="grid grid-cols-[repeat(auto-fill,minmax(60px,1fr))] gap-2 transition-all">
            <span v-for="group in course.groups" :key="group.id" @click="currentState.setState({type: 'group', data: group.id})" class="text-lg dark:text-white py-1 cursor-pointer gap-2 text-center">{{ group.name }}</span>
          </div>
        </transition>
      </div>
    </div>



  </nav>
</template>

<style scoped>
  .group-enter-from, .group-leave-to {
    height: 0;
    overflow: hidden;
    opacity: 0;
  }

  .group-enter-to, .group-leave-from {
    height: auto;
    opacity: 1;
  }
</style>